import React, { PureComponent } from 'react';
import { userOptions } from './options';
import { ScrollBoard } from '@jiaminghi/data-view-react';
import { getBoxStockInfo } from '../../../services/index';
class UserSituation extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      modulShow:false,
      modulURL:'',
      storeModul:false,
      storeList:[],
      storeTitle:'',
      config: {
        // 表头背景色
        headerBGC: '#443dc5',
        // 奇数行背景色
        oddRowBGC: '#09184F',
        // 偶数行背景色
        evenRowBGC: '#070C34',
        // 行号
        index: false,
        waitTime:10000,
        // 行号表头
        // indexHeader: '序号',
        // 宽度
        columnWidth: [150, 150, 50,50],
        // 对其方式
        align: ['center'],
        // 表行数
        rowNum: 10,
        carousel: 'page'
      },
    };
  } 
  get allNum() {
    let storeList =this.state.storeList;
    let num=0;
    for(let i=0;i<storeList.length;i++){
      num+=storeList[i].stockNumber
    }
    return num
  }
  closeModul= e=>{
    this.setState({
      modulShow:false,
    })
  }
  closeStoreModul=()=>{
    this.setState({
      storeModul:false,
    })
  }
  getValue= e=> {  
    if(e.columnIndex==e.row.length-3){ // 查看视频 
      this.setState({
        modulShow:true,
        modulURL:e.row[e.row.length-1]
      })
    }
    if(e.columnIndex==e.row.length-4){ // 查看库存 
      this.setState({
        storeModul:true,
        storeTitle:e.row[0],
      })
      this.postBoxStockInfo(e.row[e.row.length-2]);
    }
    if(e.columnIndex==0){ // 点击店铺
      this.props.leftClick(e.row[e.row.length-2]);
    }
  }
  async postBoxStockInfo(id){
    let res = await getBoxStockInfo({ storeId:id });  
    if(!res){return} 
    this.setState({
      storeList : res.result
    }) 
  }
  render() {
    const { userSitua } = this.props;  
    const { modulShow,modulURL,storeModul,storeList } = this.state;  
    const config = {
      ...this.state.config,
      ...userOptions(userSitua),
    };
    
    return (
      <div>
        {userSitua ? (
          <ScrollBoard
            config={config}
            onClick={this.getValue}
            style={{
              width: '5.475rem',
              height: '6.875rem',
            }}></ScrollBoard>
        ) : (
          ''
        )}
        { modulShow ? (
        <div>
          <div className="modul" onClick={this.closeModul}></div>
          <div className="modul-pop">
            <iframe   src={modulURL}
                      width="100%"
                      height="100%"
                      id="ysOpenDevice"
                      allowfullscreen
            >
            </iframe>
          </div>
        </div>
        ):('')}

        { storeModul ? (
        <div className="modul-box">
          <div className="modul" onClick={this.closeStoreModul}></div>
          <div className="modul-pop1">
            
            <div className="modul-title" dangerouslySetInnerHTML={{__html:this.state.storeTitle}}>
               
            </div>
            {
              storeList.map((item, index) => {
                return <div className="goods-list" >
                  <div className="goods-left">{item.goodsName}</div>
                  <div className="goods-right">{item.stockNumber}(份)</div>
                </div>
              })
            }
            <div className="goods-list" >
                <div className="goods-left">总计</div>
                <div className="goods-right">{this.allNum}(份)</div>
              </div> 
            </div>
            
        </div>
        ):('')}
      </div>
     
    );
  }
}

export default UserSituation;
